<template>
  <div>
    <div v-if="device==='desktop'" class="dswd-recruitment-first">
      <div class="first-wrap">
        <div class="search-content">
          <div class="recruitment-type">
            <el-radio-group v-model="filters.item" fill="#5F8CC8" @change="searchJob">
              <el-radio-button label="1">社会招聘</el-radio-button>
              <el-radio-button label="2">校园招聘</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-input">
            <el-input
              v-model="filters.union"
              placeholder="职位/城市/职业"
            >
              <el-button slot="append" class="search-button" @click="searchJob">搜索</el-button>
            </el-input>
          </div>
        </div>
        <div class="search-devide-line" />
        <div class="search-condition">
          <div class="condition-type">
            我想工作的城市
          </div>
          <div class="condition-content">
            <ul class="condition-wrap">
              <template v-for="item in cityList">
                <li :key="'city' + item.code" class="condition-item">
                  <span class="item-name" :class="filters.city===item.code?'isCondition': ''" @click="cityChange(item)">{{ item.name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="search-condition">
          <div class="condition-type">
            我想从事的岗位
          </div>
          <div class="condition-content">
            <ul class="condition-wrap">
              <template v-for="item in typeList">
                <li :key="'type' + item.code" class="condition-item">
                  <span class="item-name" :class="filters.type===item.code?'isCondition': ''" @click="typeChange(item)">{{ item.name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div v-if="device==='ipad'" class="dswd-p-recruitment-first">
      <div class="first-wrap">
        <div class="search-condition">
          <div class="condition-type">
            我想工作的城市
          </div>
          <div class="condition-content">
            <ul class="condition-wrap">
              <template v-for="item in cityList">
                <li :key="'city' + item.code" class="condition-item">
                  <span class="item-name" :class="filters.city===item.code?'isCondition': ''" @click="cityChange(item)">{{ item.name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="search-condition">
          <div class="condition-type">
            我想从事的岗位
          </div>
          <div class="condition-content">
            <ul class="condition-wrap">
              <template v-for="item in typeList">
                <li :key="'type' + item.code" class="condition-item">
                  <span class="item-name" :class="filters.type===item.code?'isCondition': ''" @click="typeChange(item)">{{ item.name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device==='mobile'" class="dswd-m-recruitment-first">
      <div class="first-wrap">
        <div class="search-condition">
          <div class="condition-type">
            我想工作的城市
          </div>
          <div class="condition-content">
            <ul class="condition-wrap">
              <template v-for="item in cityList">
                <li :key="'city' + item.code" class="condition-item">
                  <span class="item-name" :class="filters.city===item.code?'isCondition': ''" @click="cityChange(item)">{{ item.name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="search-condition">
          <div class="condition-type">
            我想从事的岗位
          </div>
          <div class="condition-content">
            <ul class="condition-wrap">
              <template v-for="item in typeList">
                <li :key="'type' + item.code" class="condition-item">
                  <span class="item-name" :class="filters.type===item.code?'isCondition': ''" @click="typeChange(item)">{{ item.name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  props: {
    filters: {
      type: Object,
      default: () => {}
    },
    cityList: {
      type: Array,
      default: () => []
    },
    typeList: {
      type: Array,
      default: () => []
    }
  },
  filters: {
    jobFilter(value) {
      let resultText = '社会招聘'
      if (value === '2') {
        resultText = '校园招聘'
      }
      return resultText
    }
  },
  methods: {
    searchJob() {
      this.$emit('searchJob')
    },
    cityChange(item) {
      this.filters.city = item.code
      this.searchJob()
    },
    typeChange(item) {
      this.filters.type = item.code
      this.searchJob()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/recruitment/first.scss";
</style>